各位好！大家好！終於進到番外篇了，離完賽又更近一點，是不是很開心呢? 前面手動實做SPA的部份，算是告一段落了，不過還有一個禮拜的時間要生出文章，因應這種情況，準備了幾篇輕鬆實用的內容(?)今天的主題是「用Bootstrap開發客製化元件」，前面我們有用NPM安裝好Bootstrap套件，以及搭配SCSS做開發，所以這邊來介紹幾個覺得實用的元件，之後會示範把它們做成模組來重複使用。
以下開始正式介紹(溫馨提示：按下標題會直接連結到元件頁面哦)：
這個叫做導覽路徑，也叫麵包屑，典故是源自格林童話故事，沿途在路上灑麵包屑，就算迷了路也能找到方向回到家，意思是當使用者到了網站內的某一頁，可以透過導覽路徑回去上層的頁面。
這裡介紹一個小技巧，導覽路徑連結分隔符號預設是「/」符號，若想要改成別的樣式，可以前往SCSS變數設定，在src/scss/_variables.scss加入下面的語法就可囉：
$breadcrumb-divider: quote('>');
成果一覽：
_variables.scss除了可以設定自訂scss變數，也可以改變Bootstrap的變數，經過設定就可以蓋掉原本Bootstrap預設的樣式，不用再自己寫新的，非常方便。需要注意是否正確引入以及引入的順序，自訂的變數檔案必須在引入Bootstrap的SCSS前，像下面這樣：
PS.關於SCSS基本設置已有在[DAY13]手動打造SPA - 環境初始化建置以及[DAY17]進階應用 - 幫你的SPA套上Bootstrap中介紹到，所以這裡就不多做贅述。
Bootstrap除了有表單的元件，另外有個Input group，叫做輸入框組。可以和icon圖案或是按鈕結合的輸入框元件，讓你的UI給人眼睛一亮。圖案的位置可以放前面，也可以放在尾巴，另外這裡的Icon源自Font Awesome，使用class搭配CSS就可以顯示，非常方便，後面會再專門介紹，並搭配SCSS模組化引入使用。
這是Bootstrap彈出視窗的元件，記得我們在前幾天有實做到嗎? Modal可以作為javascript原生alert警告彈窗的替代方案，也可以在內部搭配自訂的header與footer，預設會有CSS transition的效果，讓提醒視窗不會過於單調。對了，除了alert也可以應用在confirm確認視窗哦，只要加入按鈕在modal footer就可以了，這個之後也會來實做元件模組化。
顧名思義叫下拉選單，當有許多連結或選項不想全部顯示在畫面上時，可以把它們都放到這個dropdown裡節省空間，需要時再點開。最常看到的地方應該就是和Navbar元件做搭配：
除了連結，也可以放入其他的內容：
這個算是滿經典的UI，幾乎許多網站都會看到，也是許多UI Framework中會見到的元件，最有名的應該是Material Design。Cards作為一個容器，裡片可以再放置其他元素，並且也可以在內部設定header和footer，例如下面這樣：
下面這種Card decks也很好用，可以讓在同一列的Cards保持相同比例與高度，讓排版呈現一致化：
另外Cards是Bootstrap 4版本才出現的，較早的Bootstrap 3比較相像的是Wells，但沒有header和footer。
這個也算是很常見的提醒訊息，不過跟Modal浮出視窗效果不一樣，通常是直接在畫面中顯示的靜態訊息，也有其他開發套件會搭配css animation做出即時通知的效果(Notification)。訊息搭配不同顏色，給使用者不同的提示作用，例如綠色代表操作成功，紅色代表警示或錯誤等。
這個是Bootstrap 4.2後才出現的UI，有點類似Notification，也可以自訂header，並決定不同出現的位置。另外還有個類似的叫Bootstrap Notify，也是個很好用的套件。
常出現在讀取畫面，也叫做loader，讓使用者知道資料正在讀取。
這也是提示訊息的作用，當使用者按下按鈕(click)後會出現，比如像是按鈕disabled的狀態，顯示進一步的說明給使用者。
跟前一個Popovers很像，差別在不用按下去，只要滑鼠移動到範圍內(mouseover)就會出現。
今天我們很簡單的介紹Bootstrap元件，所以沒有太深的內容，後面幾天會來實做功能模組化，嘗試做出實用的元件，今天的內容就到這裡。
「...欸river這篇混很大喔」
iThome鐵人賽
看影片追技術